<template>
	<div class="Linktest">
		<div class="barFrame-box" v-for="(item, k) in myData" :key="k">
			<div class="barFrame-box-item">
				<div class="testName">
					<span>{{ item.label }}</span>
				</div>
				<div class="symbol-box">
					<template v-for="(node, i) in item.data">
						<span :class="node.class" :key="i">
							<!-- {{node.status}} -->

							<i class="el-icon-error cross" v-if="node.status == 'n'"></i>
							<i class="el-icon-success dot" v-else-if="node.status == 'y'"></i>

						</span>
					</template>
				</div>
				<div class="percent">
					<span>{{ item.succes }} </span>
					<span> / </span>
					<span> {{ item.number }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		fetchData,
		getSqlLinkTest,
		getMySqlLinkTest,
		getOracleLinkTest,
		getOsLinkTest
	} from "@/api/index.js";
	import bus from "common/bus.js";
	export default {
		data() {
			return {
				postData: {
					opera: "AllConnectStatus",
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {},
				},
				myData: {
					Oracle: {
						label: "Oracle",
						succes: 0,
						number: 0,
						data: []
					},
					SQLServer: {
						label: "SQLServer",
						succes: 0,
						number: 0,
						data: []
					},
					Mysql: {
						label: "Mysql",
						succes: 0,
						number: 0,
						data: []
					},
					Host: {
						label: "服务器",
						succes: 0,
						number: 0,
						data: []
					},
					Network: {
						label: "网络",
						succes: 0,
						number: 0,
						data: []
					},

				},
				showMax: 18,
				timerName: "Linktest",
				timerEventName: "timerLinktest",
				timerInterval: 1000 * 60,
			};
		},
		created() {
			this.getData();
			this.timein()
			bus.$emit("timerNewTodo", {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0,
			});

			bus.$on(this.timerEventName, (msg) => {
				if (msg.isGetData) {
					this.getData();
				}
			});

		},
		mounted() {},
		computed: {},
		methods: {
			timein() {
				this.timer = setInterval(() => {
					// 操作
					this.getData();
				}, 30000);
				// 通过$once来监听定时器，在beforeDestroy钩子可以被清除
				// this.$once('hook:beforeDestroy', () => {
				// 	clearInterval(this.timer);
				// })
			},
			getData() {
				// fetchData({
				//   postData: JSON.stringify(this.postData),
				// }).then((res) => {


				//   res.data.forEach((element) => {
				//     if(element.OBJECT_NAME=="Oracle DB Connect"){
				//       return ;
				//     }
				//     console.log(res)
				//     const _objName = this.myDataDict(element.OBJECT_NAME);

				//     // this.myData[_objName].succes = element.CG;
				//     this.myData[_objName].succes = element.SB;
				//     this.myData[_objName].number = element.CG + element.SB;

				//     let _arr = [];

				//     const _length =this.myData[_objName].number > this.showMax? this.showMax: this.myData[_objName].number;
				//     // const _length =this.myData[_objName].number*2
				//         // console.log(_length)
				//     for (let i = 0; i < _length; i++) {
				//       let _item = {};
				//       i < element.SB
				//         ? (_item = { status: "n", class: "cross" })
				//         : (_item = { status: "y", class: "dot" });
				//       _arr.push(_item);
				//     }
				//     this.myData[_objName].data = _arr;
				//     // console.log(_arr,'arr')
				//   });
				// });
				getOsLinkTest().then(_ => {
					return Object.values(_)
				}).then(res => {
					res.forEach((element) => {
						const _objName = this.myDataDict(element['object name']);
						this.myData[_objName].succes = element.SB;
						this.myData[_objName].number = element.CG + element.SB;
						let _arr = [];
						const _length = this.myData[_objName].number > this.showMax ? this.showMax : this
							.myData[_objName].number;
						for (let i = 0; i < _length; i++) {
							let _item = {};
							i < element.SB ?
								(_item = {
									status: "n",
									class: "cross"
								}) :
								(_item = {
									status: "y",
									class: "dot"
								});
							_arr.push(_item);
						}
						this.myData[_objName].data = _arr;

					});

				})

				getSqlLinkTest().then(res => [res]).then(res => {

					res.forEach((element) => {
						const _objName = this.myDataDict(element['object name']);

						// this.myData[_objName].succes = element.CG;
						this.myData[_objName].succes = element.SB;
						this.myData[_objName].number = element.CG + element.SB;

						let _arr = [];

						const _length = this.myData[_objName].number > this.showMax ? this.showMax : this
							.myData[_objName].number;

						for (let i = 0; i < _length; i++) {
							let _item = {};
							i < element.SB ?
								(_item = {
									status: "n",
									class: "cross"
								}) :
								(_item = {
									status: "y",
									class: "dot"
								});
							_arr.push(_item);
						}
						this.myData[_objName].data = _arr;

					});

				})

				getMySqlLinkTest().then(res => [res]).then(res => {

					res.forEach((element) => {
						const _objName = this.myDataDict(element['object name']);

						// this.myData[_objName].succes = element.CG;
						this.myData[_objName].succes = element.SB;
						this.myData[_objName].number = element.CG + element.SB;

						let _arr = [];

						const _length = this.myData[_objName].number > this.showMax ? this.showMax : this
							.myData[_objName].number;

						for (let i = 0; i < _length; i++) {
							let _item = {};
							i < element.SB ?
								(_item = {
									status: "n",
									class: "cross"
								}) :
								(_item = {
									status: "y",
									class: "dot"
								});
							_arr.push(_item);
						}
						this.myData[_objName].data = _arr;

					});

				})
				getOracleLinkTest().then(res => [res]).then(res => {
					res.forEach((element) => {
						const _objName = this.myDataDict(element['object name']);

						// this.myData[_objName].succes = element.CG;
						this.myData[_objName].succes = element.SB;
						this.myData[_objName].number = element.CG + element.SB;

						let _arr = [];

						const _length = this.myData[_objName].number > this.showMax ? this.showMax : this
							.myData[_objName].number;

						for (let i = 0; i < _length; i++) {
							let _item = {};
							i < element.SB ?
								(_item = {
									status: "n",
									class: "cross"
								}) :
								(_item = {
									status: "y",
									class: "dot"
								});
							_arr.push(_item);
						}
						this.myData[_objName].data = _arr;

					});

				})
			},
			myDataDict(val) {
				switch (val) {
					case "Oracle DB Connect":
						return "out Oracle";
						break;
					case "ORACLEDBConnect":
						return "Oracle";
						break;

					case "Host Connect":
						return "Host";
						break;
					case "Network Connect":
						return "Network";
						break;
					case "SQLserver DB Connect":
						return "SQLServer";
						break;
					case "Mysql DB Connect":
						return "Mysql";
						break;

					default:
						break;
				}
			},
		},
		beforeDestroy() {
			bus.$emit("timerNewTodo", {
				name: this.timerName,
			});
		},
		watch: {},
	};
</script>

<style scoped>
	@media screen and (max-width: 1280px) {

		.testName,
		.cross,
		.dot {
			font-size: 12px;
		}

		.barFrame-box-item {
			height: calc(4.1vh /var(--zoom));
		}
	}

	@media screen and (max-width: 1365px) and (min-width: 1280px) {

		.testName,
		.cross,
		.dot {
			font-size: 12px;
		}

		.barFrame-box-item {
			height: calc(4.1vh /var(--zoom));
		}
	}

	@media screen and (max-width: 1600px) and (min-width: 1365px) {

		.testName,
		.cross,
		.dot {
			font-size: 14px;
		}

		.barFrame-box-item {
			height: calc(3.6vh /var(--zoom));
		}
	}

	@media screen and (max-width: 1778px) and (min-width: 1600px) {

		.testName,
		.cross,
		.dot {
			font-size: 14px;
		}

		.barFrame-box-item {
			height: calc(4.1vh /var(--zoom));
		}
	}

	@media screen and (max-width: 1920px) and (min-width: 1778px) {

		.testName,
		.cross,
		.dot {
			font-size: 16px;
		}

		.barFrame-box-item {
			height: calc(4.3vh /var(--zoom));
		}
	}

	@media screen and (max-width: 2560px) and (min-width: 1920px) {

		.testName,
		.cross,
		.dot {
			font-size: 18px;
		}
	}

	@media screen and (max-width: 3840px) and (min-width: 2560px) {

		.testName,
		.cross,
		.dot {
			font-size: 20px;
		}
	}

	@media screen and (min-width: 3840px) {

		.testName,
		.cross,
		.dot {
			font-size: 24px;
		}
	}

	.Linktest {
		height: 98%;
		/* text-align: center; */
		color: aliceblue;
		/* overflow-y: scroll; */
		/* 定义滚动条样式 */
		/* scrollbar-color: #042463 rgba(0, 0, 0, 0);
  scrollbar-width: thin; */
	}

	/* .Linktest::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.Linktest::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: rgba(4, 44, 119, 0.7);
}
.Linktest::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
} */

	.barFrame-box-item {
		border: 0.5px solid rgb(4, 44, 119);
		/* padding: 0px 0px 0px 0px !important;
    margin-bottom: 1%; */
		border-radius: 25px;
		/* height: calc((100% - 7%) / 5); */
		/* min-height: 22px; */
		padding: 3px;
		margin-top: 3px;
		display: grid;
		grid-template-columns: 20% auto 20%;
		font-size: 14px;
		row-gap: 30px;

		/* justify-content:center; */
		align-content: center;
	}

	/* .Linktest{

} */
	.testName {
		/* text-align: center;
    overflow: hidden;
    display:block;
    height: 100%;
    float: left;
    padding: 2% 0 1% 0; */
		display: grid;

		align-items: center;
	}

	.symbol-box {
		text-align: center;
		height: 85%;
		margin: 1% 0 1% 0;
		overflow: hidden;
		/* display: grid; */
		/* align-content: center; */
		/* column-gap: 5px; */
		/* grid-template-columns: 1fr; */
	}

	.percent {
		text-align: center;
		overflow: hidden;
		display: block;
		height: 100%;
		float: right;
		padding: 2% 0 1% 0;
	}

	.dot {
		color: green;
		/* background-color: green;      
    border-radius: 50%;      
    -moz-border-radius: 50%;      
    -webkit-border-radius: 50%;   
    display:block;
    height: 100%; */
		/* font-size: larger; */
		/* float: left;
    text-align: center;
    padding: 0 2% 0 2%;
    margin: 0% 1.5% 0 1.5%; */
	}

	.cross {
		color: red;
		/* background-color:red;      
    border-radius: 50%;      
    -moz-border-radius: 50%;      
    -webkit-border-radius: 50%;
    display:block;
    height: 100%; */

		/* font-size: larger; */
		/* float: left;
    text-align: center;
    padding: 0 2% 0 2%;
    margin: 0% 1.5% 0 1.5%; */
	}
</style>
